<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>互联网金融贷款平台</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="../css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/user.css"/>
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script src="../script/user.js" type="text/javascript"></script>
    <script src="../angularjs/vue.js"></script>
    <script src="../angularjs/axios.min.js"></script>
    <!-- 引入样式eleme -->
    <link rel="stylesheet" href="../angularjs/index.css">
    <!-- 引入组件库 -->
    <script src="../angularjs/index.js"></script>
    <!-- bootstarp -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../bootstrap/js/bootstrap.min.js"></script>




</head>
<body>

<div id="app">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">金证信贷系统</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="个人中心首页.html"><span></span>首页</a></li>

            <li><a href="#"><span class="glyphicon glyphicon-user"></span>角色: {{nickname}}</a></li>
            <li><a href="javascript:void(0)" @click="logout()"><span class="glyphicon glyphicon-log-in"></span>注销</a>
            </li>
        </ul>

    </div>
    <!--个人中心-->
    <div class="wrapper wbgcolor">
        <div class="w1200 personal">
            <div id="personal-left" class="personal-left">
                <ul>
                    <li class=""><span><a href="个人中心首页.html"><i class="dot dot1"></i>账户总览</a></span></li>
                    <li class=""><span><a href="个人中心-账户设置.html"><i class="dot dot02"></i>账户设置</a> </span></li>
                    <li class="pleft-cur"><span><a href="个人中心-借款记录.html"><i class="dot dot02"></i>查看借款记录</a> </span>
                    </li>
                    <li class=""><span><a href="个人中心-查看申请记录.html"><i class="dot dot02"></i>查看申请记录</a> </span></li>
                    <li class=""><span><a href="../applyforaloan.html"><i class="dot dot02"></i>申请贷款</a> </span></li>
                </ul>
            </div>
            <div class="personal-main">
                <div class="personal-investnote">
                    <h1>
                        <button class="btn btn-primary" @click="return1()">返回</button>
                    </h1>
                    <h3><i>账单详情</i></h3>

                    <div class="text-center">
                        <table class="table text-center" style="font-size: 28px">
                            <tr>
                                <td>
                                    <el-link type="primary" style="font-size: 24px" @click="last()"
                                             v-if="Result.whichIssue<2" disabled>上一期
                                    </el-link>
                                    <el-link type="primary" style="font-size: 24px" @click="last()"
                                             v-if="Result.whichIssue>'1'">上一期
                                    </el-link>
                                </td>
                                <td style="color: #00ff58">第{{Result.whichIssue}}期</td>
                                <td>
                                    <el-link type="primary" style="font-size: 24px" @click="next()"
                                             v-if="Result.whichIssue<pageSize">下一期
                                    </el-link>
                                    <el-link type="primary" style="font-size: 24px" @click="last()"
                                             v-if="Result.whichIssue==pageSize" disabled>下一期
                                    </el-link>
                                </td>

                            </tr>
                        </table>
                    </div>

                    <div class="text-center">
                        <span style="font-size: 18px" v-if="Result.status==0">  本息待还{{Result.principalAndInterest}}（元）<span
                                v-if="Result.penaltyInterest>'0'">逾期罚款：{{Result.penaltyInterest}}（元）</span></span>
                        <span style="font-size: 18px" v-if="Result.status==1">  已还款（元）</span>
                        <h1 style="color: #ff3211">共需还款：{{Result.principalAndInterest+Result.penaltyInterest}}</h1>
                        <span style="font-size: 10px"> 最后还款日{{Result.endTime}}</span>
                        <h1 v-if="Result.whichIssue==dangqian && Result.status==0">
                            <button class="btn btn-success btn-lg" @click="repayment()">还款</button>
                        </h1>
                    </div>

                    <div style="margin-top: 20px">
                        <table class="table">
                            <tr>
                                <td class="col-lg-5 text-right" style="font-size: 10px">记账周期：</td>
                                <td style="font-size: 10px">{{Result.startTime}}—{{Result.endTime}}</td>
                            </tr>
                            <tr>
                                <td class="col-lg-5 text-right" style="font-size: 10px">出账日：</td>
                                <td style="font-size: 10px">{{Result.startTime}}</td>
                            </tr>
                        </table>
                    </div>
                    <div>
                        <el-link type="primary" @click="Prepayment()">提前还款</el-link>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <!--模态框-->

</div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            data: null,             //没用上
            code: null,         //状态码
            nickname: null,     //用户名
            Result: {
                endTime:null,
                startTime:null,
            },       //查询的账单
            dangqian: null,   //当前期数
            pageSize: null,  //总期数

        },

        methods: {
            open() {
                this.$message.error(vue.msg + ":" + vue.data);
            },
            open2() {
                this.$message({
                    message: '还款成功',
                    type: 'success'
                })
            },
            return1: function () {
                //返回
                location.href = "个人中心-借款记录.html"
            }
            ,
            init: function () {
                //初始化
                vue.nickname = localStorage.getItem("nickname");
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/getbBillForm',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token"),
                        borrowerInfoId: localStorage.getItem("borrowerInfoId")
                    }
                })
                    .then(function (response) {
                        vue.Result = response.data.data;
                        vue.dangqian = response.data.data.whichIssue;
                        vue.pageSize = parseInt(response.data.token);//这是次数，临时占用token用来传数据
                        console.log(vue.Result.endTime)
                        if (response.data.code == 200) {
                            if (vue.Result.overdueDays > 0 && vue.Result.status==0 ) {
                                //用户逾期了
                                vue.$alert('你当前账单已经逾期' + vue.Result.overdueDays + '天' + '逾期罚息：' + vue.Result.penaltyInterest + '(元)'
                                    , '系统提示', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            vue.$message({
                                                type: 'error',
                                                message: `系统警告: 请及时还款！`
                                            });
                                        }
                                    });
                            }
                        }

                    })
            },
            requestYanqi: function () {
                //申请延期
                location.href = "个人中心-借款记录-申请延期.html"
            },
            last: function () {
                vue.Result.whichIssue--;
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/getOneBillForm',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token"),
                    },
                    data: vue.Result
                })
                    .then(function (response) {
                        console.log(response.data.data.whichIssue)
                        vue.Result = response.data.data
                    })
            },
            next: function () {
                console.log(vue.dangqian)
                vue.Result.whichIssue++;
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/getOneBillForm',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    params: {
                        token: localStorage.getItem("token"),
                    },
                    data: vue.Result
                })
                    .then(function (response) {
                        console.log(response.data.data.whichIssue)
                        vue.Result = response.data.data
                        vue.Result = response.data.data;
                        console.log(vue.Result.endTime)
                    })
            },
            logout: function () {
                //注销
                localStorage.removeItem("token");
                location.href = "login.html"
            },
            Prepayment: function () {
                //提前款换，传入贷款信息id
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/Prepayment',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    data: vue.Result
                })
                    .then(function (response) {
                        vue.msg = response.data.msg;
                        vue.data = response.data.data;
                        if (response.data.code != 200) {
                            //用户还款小于三个月，提示提前还款失败
                            vue.open();
                        } else {
                            //用户还款大于三个月，可以提前还款
                            vue.$prompt('需提前支付金额', '提前还款', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                inputValue: vue.data
                            }).then(({value}) => {
                                //用户点了确定，就去后台修改数据
                                axios({
                                    method: 'post',
                                    url: 'http://127.0.0.1:10088/user/payPrepayment',
                                    headers: {
                                        'content-type': 'application/json',//设置请求头请求格式为json
                                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                                    },
                                    data: vue.Result
                                }).then(function (response) {
                                    vue.$message({
                                        type: 'success',
                                        message: '系统提示: 还款成功'
                                    });
                                    setInterval(() => {
                                        location.href = "个人中心-借款记录-查看详情.html";
                                    }, 1000);
                                })

                            }).catch(() => {
                                vue.$message({
                                    type: 'info',
                                    message: '客户取消支付'
                                });
                            });
                        }
                    })
            },
            repayment: function () {
                //还款
                axios({
                    method: 'post',
                    url: 'http://127.0.0.1:10088/user/updateForm',
                    headers: {
                        'content-type': 'application/json',//设置请求头请求格式为json
                        'auth': localStorage.getItem("token") //设置token 其中k名要和后端协调好
                    },
                    data: vue.Result
                }).then(function (response) {
                    vue.code = response.data.code
                    if (vue.code == 200) {
                        //还款成功
                        vue.open2();

                        setInterval(() => {
                            location.href = "个人中心-借款记录-查看详情.html";
                        }, 1000);
                    }
                });
            }
        }

    })
    vue.init()
</script>
</html>